<template>
  <div class="home">
    <div id="certify" class="container" v-if="picList.wallpapers.length>0">
        <swiper
          :thumbs="{ swiper: thumbsSwiper }"
          navigation
          :initialSlide="parseInt($route.params.id)"
            :lazy="{
                loadPrevNext: true,
                loadPrevNextAmount: 2,
            }"
            watch-slides-visibility
          class="gallery-top"
        >
          <swiper-slide
            v-for="(item,index) of picList.wallpapers"
            :key="item.wallpaperId"
            :data-background="item.wallpaperImg[1].uri" 
            class="swiper-lazy"
          >
            <div class="swiper-lazy-preloader"></div>
            <ul class="pic-tools">
                <li class="iconfont" :class="{love:item.hasCollect==1}" @click="setLove(item.wallpaperId,index)">&#xe608;</li>
                <li class="iconfont">&#xe600;</li>
                <li class="iconfont" @click="fullScreen(index)">&#xe63f;</li>
            </ul>
            <div class="info">
                <p class="title" v-if="item.author.authorName!='默认'">
                    {{item.author.authorDesc}}<br/>
                    {{item.author.authorName}}
                </p>
                <img :src="item.author.qrCode" width="100"/>
            </div>
          </swiper-slide>
        </swiper>

      <!-- Thumbs Swiper -> store swiper instance -->
      <!-- It is also required to set watchSlidesVisibility and watchSlidesProgress props -->
        <swiper
          @swiper="setThumbsSwiper"
          :spaceBetween="10"
          :slidesPerView="5"
          :freeMode="true"
          watch-slides-visibility
          watch-slides-progress
          class="gallery-thumbs"
        >
          <swiper-slide
            v-for="(item,index) of picList.wallpapers"
            :key="item.wallpaperId"
            :style="`background-image:url(${item.wallpaperImg[0].uri})`"
          >
           <bar v-if="picindex==-2&&beforpic==index"  :full="picindex"></bar>
          </swiper-slide>
        </swiper>
      </div>
        <div v-else class="empty">
            <img class="empty-img" src="~@/assets/empty.svg"/>
            <p class="empty-title">这里空空如她，快去挑选喜欢的壁纸吧</p>
            <router-link class="go-home" to="/">随便逛逛</router-link>
        </div>
        <full v-if="picindex>=0" :index="picindex" @close="close"></full>
    </div>
</template>

<script>
import { defineComponent, computed,ref } from "vue";
import { useStore } from "vuex";
import axios from 'axios'
import PictureList from "./PictureList";
import Full from "./Full";
import Bar from "./Bar";
// import Swiper core and required components
import SwiperCore, { Navigation, Thumbs,Lazy } from "swiper";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide} from "swiper/vue";

// Import Swiper styles
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/thumbs/thumbs.scss";
// install Swiper components
SwiperCore.use([Navigation, Thumbs,Lazy]);

export default defineComponent({
  components: {
    Swiper,
    SwiperSlide,
    PictureList,
    Full,
    Bar
  },
  data() {
    return {
      thumbsSwiper: "",
    };
  },
  setup() {
      document.title="壁纸-来自联想锁屏"
    const store = useStore();
    const picList = computed(() => store.state.columns || 0);
    const setLove=(id,index)=>{
      axios.get(`/apis/wallpapercontent/wallpaper/report/opt?type=1&wallpaperId=${id}`).then(data=>{
        store.commit('setLove',index)
      }).catch(e=>{
        
      })
    }
    const picindex=ref(-1)
    const beforpic=ref(-1)
    const fullScreen=(i)=>{
      console.log(i)
      picindex.value=-2
      beforpic.value=i
      var newImg = new Image()
      newImg.src =store.state.columns.wallpapers[i].wallpaperImg[2].uri
      newImg.onload = () => { // 图片加载成功后把地址给原来的img
        console.log('加载成功')
        picindex.value=i
      }
    }
    const close=()=>{
      picindex.value=-1
    }
    return {
      picList,
      setLove,
      fullScreen,
      close,
      picindex,
      beforpic
    };
  },
  methods: {
    setThumbsSwiper(swiper) {
      this.thumbsSwiper = swiper;
    },
  },
});
</script>
<style lang="stylus" scoped>
.empty
  height 70vh
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .empty-img
      width 200px
  .empty-title
    color #000
    font-size 14px
    margin-bottom 30px
  .go-home
    padding 10px 30px
    text-align center
    color #ffffff
    background-color rgb(76,106,255)
    border-radius 50px
    text-decoration none
.home >>> 
    .swiper-container
        position relative
        --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
        --swiper-preloader-color: #00ff33;/* 单独设置预加载圆圈的颜色 */
        &:hover
            .pic-tools
                display flex
                justify-content center
            .info
                display block
        .info
            display none
            position absolute
            right 20px
            bottom 45px
            .title
                text-align center
                color #fff
            img 
                width
                    100px
        .pic-tools
            display none
            overflow hidden
            position absolute 
            bottom 20px 
            height 50px
            width 100%
            padding 0
            list-style none
            transition all .3s
            line-height 50px
            padding 0 10px
            font-size 14px
            .love
                color rgb(254,107,122)
            li
                cursor pointer
                color #fff
                height 40px
                width 40px
                font-size 13px
                border-radius 50%
                margin 10px 10px
                text-align center
                line-height 40px
                background-color rgba(0,0,0,.5)
                transition all .2s
                &:hover
                    background-color rgba(0,0,0,.8)
@media (max-width: 500px) 
    .home >>> 
        .info
            right 5px!important
            .title
                font-size 12px
            img 
                width 50px

</style>
<style lang="stylus" scoped>
#certify{
    height 100vh
}
.swiper-container {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
    position:relative;
}

.gallery-top {
  height: 80%;
  width: 100%;
}

.gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}

.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}

.home >>> {
  #certify:hover .swiper-button-prev {
    display: flex;
  }

  #certify:hover .swiper-button-next {
    display: flex;
  }

  #certify .swiper-button-prev, .swiper-button-next {
    display: none;
    color: rgb(228, 228, 228);
  }

  #certify .swiper-button-prev:after, .swiper-button-next:after {
    font-size: 30px;
  }

  #certify .swiper-button-prev:hover {
    color: #ccc;
  }

  #certify .swiper-button-next:hover {
    color: #ccc;
  }
}
</style>
